<template>
	<cmDialog v-model="dialogState" modal-title="前瞻性项目立项批文列表" model-width="1000px">
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="search()">
			<el-form-item label="立项批文名称" prop="documentName">
				<el-input v-model="state.queryForm.documentName" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="发布年份" prop="documentYear">
				<el-date-picker
					v-model="state.queryForm.documentYear"
					type="year"
					placeholder="请选择日期"
					style="width: 100%"
					format="YYYY"
					value-format="YYYY"
				/>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="search()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="dataList" stripe>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column prop="documentName" label="立项批文名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="achievementReleaseDate" label="发布日期" header-align="center" align="center" width="160"></el-table-column>
			<el-table-column prop="documentUrl" label="状态" header-align="center" align="center" width="120">
				<template #default="scope">
					{{ scope.row.achievementReleaseStatus == '0' ? '已发布' : '未发布' }}
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="handleView(scope.row)">
						<View />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<cmDialog v-model="showDetailDialog" modal-title="详情" model-width="400px">
			<div class="title">前瞻性立项批文发布名称：</div>
			<div v-if="detail" class="file">{{ detail?.fileRealName }}.{{ detail?.fileExtName }}</div>
			<template #footer>
				<div class="dialog-foot">
					<el-button type="primary" @click="handleDownLoadFile">下载</el-button>
				</div>
			</template>
		</cmDialog>
	</cmDialog>
</template>
<script lang="ts" setup>
import { getPiWenDetail, getPiWenList } from '@/api/Prospect-project/process-declare'
import cmDialog from '@/components/cm-dialog/index.vue'
import { UploadFile } from '@/interface/declare'
import { downloadFile } from '@/utils/downLoadFile'
import { computed, reactive, ref, watch } from 'vue'

const props = defineProps({
	modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'submit-success', 'dialog-cancel'])
const state = reactive({
	queryForm: {
		documentName: '',
		documentYear: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	keyType: '',
	keyword: null,
	yearrange: []
})
const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})
const dataList = ref([])

const showDetailDialog = ref<boolean>(false)

const detail = ref<UploadFile>(null)

watch(
	() => dialogState.value,
	val => {
		if (val) {
			reset()
		}
	}
)

const getDataList = () => {
	state.dataListLoading = true
	getPiWenList({
		pageIndex: state.pageNum,
		pageSize: state.pageSize,
		...state.queryForm
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const search = () => {
	state.pageNum = 1
	getDataList()
}

const reset = () => {
	state.queryForm.documentName = ''
	state.queryForm.documentYear = ''
	state.pageNum = 1
	getDataList()
}

const closeModal = () => {
	emit('update:modelValue', false)
}

const sizeChangeHandle = (e: number) => {
	state.pageSize = e
	state.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.pageNum = e
	getDataList()
}

const handleView = (row: any) => {
	showDetailDialog.value = true
	getPiWenDetail({
		id: row.id
	}).then(res => {
		detail.value = res.data
	})
}

const handleDownLoadFile = async () => {
	await downloadFile(detail.value)
	showDetailDialog.value = false
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
	padding-bottom: 20px;
}

.title {
	font-size: 16px;
}

.file {
	margin-top: 10px;
	color: #1491ff;
}
</style>
